/**
 * @param {ng.ITemplateCacheService} $templateCache
 */
export function htmlPopoverCache($templateCache) {
  $templateCache.put(
    "htmlPopover.html",
    html`'<b style="color: red">I can</b> have
      <div class="label label-success">HTML</div>
      content'`,
  );
  $templateCache.put(
    "myPopoverTemplate.html",
    html`
      <div>{{$ctrl.dynamicPopover.content}}</div>
      <div class="form-group">
        <label>Popup Title:</label>
        <input
          type="text"
          ng-model="$ctrl.dynamicPopover.title"
          class="form-control"
        />
      </div>
    `,
  );
}

export class PopoverCacheCtrl {
  static $inject = ["$scope", "$sce", "$templateCache"];

  /**
   * @param {ng.IScope} $scope
   * @param {ng.ISCEService} $sce
   * @param {ng.ITemplateCacheService} $templateCache
   */
  constructor($scope, $sce, $templateCache) {
    this.$scope = $scope;
    this.$sce = $sce;
    this.$templateCache = $templateCache;
    this.dynamicPopover = {
      content: "Hello, World!",
      templateUrl: "myPopoverTemplate.html",
      title: "Title",
    };

    this.placement = {
      options: [
        "top",
        "top-left",
        "top-right",
        "bottom",
        "bottom-left",
        "bottom-right",
        "left",
        "left-top",
        "left-bottom",
        "right",
        "right-top",
        "right-bottom",
      ],
      selected: "top",
    };

    this.htmlPopover = $sce.trustAsHtml($templateCache.get("htmlPopover.html"));
  }

  handleClick() {
    console.log("PopoverCacheCtrl", this);
  }
}
